<template>
  <div>
    <header>
      <el-row :gutter="20">
        <el-col :span="3" style="text-align:center">
          <div class="first-content ">
            <span @click="goback()">返回</span>
          </div>
        </el-col>
        <el-col :span="17" style="text-align:center">
          <div class="first-content ">
            <span> </span>
          </div>
        </el-col>
        <el-col :span="4" style="text-align:center">
          <div>
            <div style="display: flex;align-items: center; ">
              <div class="avatar">
                <i class="el-icon-user-solid"></i>
              </div>
              <div style="color: #C1C1C1;">{{ studentId }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </header>
    <hr style="margin: 0px auto;width: 100%;" color="#424242">
    <el-main class="road-info">
      <div>
        <h1 class="road-title">AURA-CAMPUS 程序员学习路径</h1>
      </div>
      <div class="road-description">
        推荐了一些学习路线图的网址，包括全栈、前端和后端等方向。推荐了一些学习路线图的网址，包括全栈、前端和后端等方向。 网址中包含了很多学习材料的链接，非常适合初学者使用。网址中包含了很多学习材料的链接，非常适合初学者使用。
      </div>

    </el-main>
    <div class="split">
      <div class="split-box">Role based Roadmaps</div>
    </div>
    <!-- <hr style="margin: 0px auto;width: 100%;" color="#424242"> -->
    <el-main style="padding: 15px 0 0 0;position: relative;width: 100%;">
      <div class="road">
        <div v-for="item in roadMap" :key="item.id">
          <a class="road-item" :href=" baseMapUrl + item.name.toLowerCase() " target="_blank">
            {{item.name}}
            <div v-if="item.isNew" class="new">
              <div class="new-point"></div>
              <div class="new-text">New</div>
            </div>
          </a>
        </div>
        
      </div>
    </el-main>

    <!-- <hr style="margin: 0px auto;width: 100%;" color="#424242"> -->


  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      studentId: '',
      roadMap:[
        { id: 1, name:'Frontend',url:'https://www.baidu.com/'},
        { id: 2, name:'Backend',url:'https://www.baidu.com/'},
        { id: 3, name:'DevOps',url:'https://www.baidu.com/'},
        { id: 4, name: 'Full Stack', url: 'https://www.baidu.com/', isNew: true },
        { id: 5, name:'AI and Data Scientist',url:'https://www.baidu.com/'},
        { id: 6, name:'Data Analyst',url:'https://www.baidu.com/'},
        { id: 7, name:'Android',url:'https://www.baidu.com/'},
        { id: 8, name:'PostgreSQL',url:'https://www.baidu.com/'},
        { id: 9, name:'Blockchain',url:'https://www.baidu.com/'},
        { id: 10, name: 'QA', url: 'https://www.baidu.com/', isNew: true },
        { id: 11, name: 'Software Architect', url: 'https://www.baidu.com/', isNew: true },
        { id: 12, name:'Flutter',url:'https://www.baidu.com/',isNew:true},
        { id: 13, name:'Cyber Security',url:'https://www.baidu.com/',isNew:true},
        { id: 14, name:'Flutter',url:'https://www.baidu.com/'},
        { id: 15, name:'UX Design',url:'https://www.baidu.com/'},
        { id: 16, name:'React Native',url:'https://www.baidu.com/',isNew:true},
        { id: 17, name:'Game Developer',url:'https://www.baidu.com/',isNew:true},
        { id: 18, name:'Technical Writer',url:'https://www.baidu.com/'},
        
        
      ],
      baseMapUrl:'https://roadmap.sh/'
    }
  },
  methods: {
    goback() {
      // 返回上一级
      this.$router.back()
    },
  },
  async created() {
    this.studentId = this.$store.state.STUDENTID
  },
}
</script>

<style scoped>
.first-content {
  padding: 5px;
  color: #ccb0e9;
  font-size: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  min-height: 30px;
  cursor: pointer;
}

.avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  background-color: white;
  font-size: 18px;
  margin: 5px 10px 0 0;
}

.second-content {
  color: white;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

}

.grid-content {
  width: 45%;
  background-color: #909399;
  padding: 50px 10px;
  border-radius: 60px;
  color: white;
  font-size: 40px;
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  margin: 25px;
  align-items: center;
}

.RouteBlocks {
  margin: 20px 0 0 0;
  border-radius: 25px;
  background-color: #303133;
  width: 67%;
  padding: 3px 15px;
  height: 10.5vw;
}

a {
  text-decoration: none;
  color: white;
}

p {

  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  margin: 12px 0;
  white-space: nowrap;
  background-color: black;
  padding: 4px 10px;
  border-radius: 20px;
  overflow: hidden;
}

h3 {
  margin: 10px 0 0 0;
}

.split{
  width: 80%;
  height: 0;
  border-bottom: #848484 1px solid;
  background-color: #303133;
  position: relative;
  margin: 15px auto;

}
.split-box{
  padding: 5px 3px;
  border-radius: 6px;
  border: #d0d0d0 1px solid;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #1d1d1d;
  color: #8d8d8d;
}


.road-info{
  width: 100%;
  text-align: center;
}
.road-title{
  display: inline-block;
  /* background-size: 100% 100%; */
  font-size: 38px;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(rgb(255, 251, 235), rgb(168, 85, 247));
  background-clip: text;
}
.road-description{
  color: #9ca3af;
  padding: 0 18%;
}


.road{
  margin: 20px 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 80%;
  max-width: 1000px;
}
.road-item {
  display: block;

  color: #848484;
  background-color: #1d1d1d;
  border: #2b2b2b 1px solid;
  text-align: left;
  border-radius: 6px;
  height: 54px;
  width:260px;
  align-content: center;
  padding-left: 15px;
  margin: 6px;
  cursor: pointer;
  position: relative;
}
.road-item:hover {
  border-color: #848484;
}
.new{
  display: flex;
  position: absolute;
  bottom: 5px;
  right: 5px;
  align-items: center;
}
.new-point{
  width: 7px;
  height: 7px;
  background-color: #9035e4;
  border-radius: 50%;
  margin-right: 5px;
  /* margin-top: 3px; */
  position: relative;
}
.new-point::after{
  content: "";
  width: 8px;
  height: 8px;
  background-color: #c084fc;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: pointAnim 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.new-text{
  color: #c38aff;
  font-size: 12px;
}
@keyframes pointAnim{

  75%,100%{
    /* transform: scale(2) translate(-50%, -50%); */
    width: 16px;height: 16px;
    opacity: 0;
  }
}
</style>